<template>
 <div id="message" v-scroll-bottom>
  	<ul v-if="currentSessionId">
  		<li v-for="entry in sessions[userInfo.managerName+'#'+ currentSessionId.managerName]">
  			<p class="time">
  				<span>{{sendTime(entry.date)}}</span>
  			</p>
  			<div class="main" :class="{self:entry.self}">
  				<img class="avatar" :src="entry.self ? userInfo.avatar : currentSessionId.avatar" alt="">
  				<p class="text">{{entry.content}}</p>
  			</div>
  		</li>
  	</ul>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, getCurrentInstance, computed } from 'vue';
import { useStore } from "vuex";

const store = useStore();
const userInfo = JSON.parse(localStorage.getItem('userInfo'));


const img = 'https://jcf-guli-edu.oss-cn-beijing.aliyuncs.com/avatar/avatar.png?t=1744767128691'

const sessions = computed(() => store.state.chat.sessions)
const currentSessionId = computed(() => store.state.chat.currentSessionId)
const sendTime = function(date){
  if (date) {
      date = new Date(date);
    }
		return `${date.getHours()}:${date.getMinutes()}`
}
// ...mapState("chat",["sessions","currentSessionId"])
// filters:{
// 	time (date) {
//     if (date) {
//       date = new Date(date);
//     }
// 		return `${date.getHours()}:${date.getMinutes()}`;
// 	}
// },
// directives: {/*这个是vue的自定义指令,官方文档有详细说明*/
//   // 发送消息后滚动到底部,这里无法使用原作者的方法，也未找到合理的方法解决，暂用setTimeout的方法模拟
//   'scroll-bottom' (el) {
//     //console.log(el.scrollTop);
//     setTimeout(function () {
//       el.scrollTop+=9999;
//     },1)
//   }
// }
const vScrollBottom = {
  updated(el){
    setTimeout(function () {
      el.scrollTop+=9999;

    },1)
  }
}
</script>

<style lang="less" scoped>
#message {
  padding: 15px;
  max-height: 68%;
  overflow-y: scroll;
  color: black;
  font-size: medium;
  ul {
    list-style-type: none;

    li {
      margin-bottom: 15px;
    }
  }

  .time {
    text-align: center;
    margin: 7px 0;

    >span {
      display: inline-block;
      padding: 0 18px;
      font-size: 12px;
      color: #FFF;
      background-color: #dcdcdc;
      border-radius: 2px;
    }
  }

  .main {
    .avatar {
      float: left;
      margin: 0 10px 0 0;
      border-radius: 3px;
      width: 30px;
      height: 30px;

    }

    .text {
      display: inline-block;
      padding: 0 10px;
      max-width: 80%;
      background-color: #fafafa;
      font-size: medium;
      border-radius: 4px;
      line-height: 30px;
    }
  }

  .self {
    text-align: right;

    .avatar {
      float: right;
      margin: 0 0 0 10px;
      border-radius: 3px;
      width: 30px;
      height: 30px;
    }

    .text {
      display: inline-block;
      padding: 0 10px;
      max-width: 80%;
      background-color: #b2e281;
      border-radius: 4px;
      line-height: 30px;
    }
  }
}
</style>
